<template>
  <div class="dict-management-view">
    <div class="table-data-view" v-loading='tableLoading' v-if="showHome">
      <div class="common-screen-view">
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title" style="width:65px">名称：</div> -->
          <el-input v-model="condition" :placeholder="$t('tables_title.name')"></el-input>
        </div>
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title">类型：</div> -->
          <el-select v-model="systemFlag">
            <el-option :label="$t('tables_title.dict_type')" value=""></el-option>
            <el-option :label="$t('tables_title.sys_type')" value="Y"></el-option>
            <el-option :label="$t('tables_title.non_sys_type')" value="N"></el-option>
          </el-select>
        </div>
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title" >状态：</div> -->
          <el-select v-model="status">
            <el-option :label="$t('tables_title.status')" value=""></el-option>
            <el-option :label="$t('tables_title.enable')" value="ENABLE"></el-option>
            <el-option :label="$t('tables_title.disable')" value="DISABLE"></el-option>
          </el-select>
        </div>

        <el-button type="primary" icon="el-icon-search" @click="searchDictList">{{$t('global.search')}}</el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('dict_add')" @click="addDictType">{{$t('global.add')}}</el-button>
      </div>
      <table-list class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @showChildrenTable="showChildrenTable"
        @reviseDictType="reviseDictType" @delDictType="delDictType"></table-list>
      <table-pagination
        :total="count"
        :currentPage="pageNow"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange">
      </table-pagination>

      <el-dialog :title="$t('dict_management.edit_dict_type_info')" :close-on-click-modal="false" :visible.sync="dictTypeInfoVisible" width="600px">
        <add-edit-dict-type :isEdit="isEdit" :editDictTypeInfo="editDictTypeInfo" @cancelView="cancelView" @refreshData="refreshData"></add-edit-dict-type>
      </el-dialog>
    </div>

    <div class="table-data-view" v-loading='tableLoading' v-if="!showHome">
      <div class="common-screen-view">
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title" style="width:65px">名称：</div> -->
          <el-input v-model="condition" :placeholder="$t('tables_title.name')"></el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchDictList">{{$t('global.search')}}</el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('dict_add')" @click="addDict">{{$t('global.add')}}</el-button>
        <el-button type="primary" icon="el-icon-back" @click="showHome = true">{{$t('global.back')}}</el-button>
      </div>
      <table-list class="table-list-view" :tableConfig="tableChildrenConfig" :tableData="tableChildrenData" @reviseDict="reviseDict" @delDict="delDict"></table-list>

      <el-dialog :title="$t('dict_management.edit_dict_info')" :close-on-click-modal="false" :visible.sync="dictInfoVisible" width="600px">
        <add-edit-dict :isEdit="isEdit" :editDictTypeInfo="editDictTypeInfo" :editDictInfo="editDictInfo" @cancelView="cancelView" @refreshData="refreshData"></add-edit-dict>
      </el-dialog>
    </div>
  </div>

</template>

<script>

import { checkPermission } from '@/common/utils/permission.js'
import { getDictsList,getDictsListById,deleteDict,deleteDictType } from '@/api/dictApi.js'

export default {
  data(){
    return{
      isEdit:false,
      showHome:true,
      tableLoading:false,
      dictTypeInfoVisible:false,
      dictInfoVisible:false,
      condition:'',
      systemFlag:'',
      status:'',
      pageNow:1,
      pageSize:10,
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      count: 0,             //数据总数
      editDictTypeInfo:{},
      editDictInfo:{},
      tableChildrenConfig:{},
      tableChildrenData:[]
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    tablePagination: () => import("@/components/table_pagination.vue"),    //引入页码组件   为方便拓展 把它与table组件分开封装
    addEditDict:()=>import('./add_edit_dict.vue'),
    addEditDictType:()=>import('./add_edit_dict_type.vue')
  },
  created(){
    this.tableConfig = {
      isShowIndex:true,
      props:[
        { type: "text-btn", label: "tables_title.type_name", prop: "name",callback:'showChildrenTable'},
        { type: "text-btn", label: "tables_title.type_code", prop: "code",callback:'showChildrenTable'},
        { type: "text", label: "tables_title.sys_dict", prop: "systemFlag"},
        { type: "text", label: "tables_title.dict_desc", prop: "description"},
        { type: "text", label: "tables_title.status", prop: "status"},
        { type: "text", label: "tables_title.create_time", prop: "createTime"},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseDictType',code:'dict_update'},
        {label:'global.delete',callback:'delDictType',code:'dict_delete'}]
    }
    this.tableChildrenConfig = {
      isShowIndex:true,
      props:[
        { type: "text", label: "tables_title.dict_name", prop: "name"},
        { type: "text", label: "tables_title.dict_code", prop: "code"},
        { type: "text", label: "tables_title.dict_desc", prop: "description"},
        { type: "text", label: "tables_title.status", prop: "status"},
        { type: "text", label: "tables_title.create_time", prop: "createTime"},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseDict',code:'dict_update'},
        {label:'global.delete',callback:'delDict',code:'dict_delete'}]
    }
    this.getList()
  },
  methods:{
    searchDictList(){
      this.pageNow = 1
      this.getList()
    },
    getList(){
      this.tableLoading = true
      getDictsList({
        page: this.pageNow,
        limit: this.pageSize,
        condition:this.condition,
        systemFlag:this.systemFlag,
        status:this.status
      }).then((res) => {
        this.tableLoading = false
        if(res.data.code == 0){
          res.data.data.forEach(element => {
            element.flag = element.systemFlag == 'Y'?'是':'否'
            element.state = element.status == 'ENABLE'?'启用':'禁用'
          });
          this.count = res.data.count
          this.tableData = res.data.data
        }
        console.log(res)
      }).catch((err) => {
        this.tableLoading = false
      });
    },
    addDictType(){            //添加字典类型
      this.isEdit = false
      this.editDictTypeInfo = {}
      this.dictTypeInfoVisible = true
    },
    reviseDictType(row){        //修改字典类型
      this.isEdit = true
      this.editDictTypeInfo = row
      this.dictTypeInfoVisible = true
    },
    delDictType(row){           //删除字典类型
      this.$confirm('是否删除字典类型"' + row.name + '"?', this.$t('global.tips'), {
        confirmButtonText: this.$t('global.confirm'),
        cancelButtonText: this.$t('global.cancel'),
        type: 'warning'
      }).then(() => {
        let formData = new FormData()
        formData.append("dictTypeId",row.dictTypeId)
        deleteDictType({dictTypeId:row.dictTypeId}).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message:  this.$t('global.del_success'),
              type: 'success'
            });
            this.getList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    addDict(){              //添加dict
      this.isEdit = false
      this.editDictInfo = {}
      this.dictInfoVisible = true
    },
    reviseDict(row){          //修改dict
      this.isEdit = true
      this.editDictInfo = row
      this.dictInfoVisible = true
    },
    delDict(row){           //删除dict
      this.$confirm('是否删除字典"' + row.name + '"?', this.$t('global.tips'), {
        confirmButtonText: this.$t('global.confirm'),
        cancelButtonText: this.$t('global.cancel'),
        type: 'warning'
      }).then(() => {
        let formData = new FormData()
        formData.append("dictId",row.dictId)
        deleteDict(formData).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message: this.$t('global.del_success'),
              type: 'success'
            });
            this.getDictsById()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    handleSizeChange(val){      //修改每页的显示条数
      this.pageSize = val
      this.pageNow = 1
      this.getList()
    },
    handleCurrentChange(val){   //切换当前页码
      this.pageNow = val
      this.getList()
    },
    showChildrenTable(row){
      this.editDictTypeInfo = row
      this.showHome = false
      console.log(row)
      this.getDictsById()
    },
    getDictsById(){
      this.tableLoading = true
      getDictsListById({
        dictTypeId:this.editDictTypeInfo.dictTypeId
      }).then(res=>{
        this.tableLoading = false
        res.data.data.forEach(element => {
          element.state = element.status == 'ENABLE'?'启用':'禁用'
        });
        this.tableChildrenData = res.data.data.filter(item=>{
          return item.code != ''
        })
      })
    },
    cancelView(){       //关闭编辑用户弹窗
      this.dictTypeInfoVisible = false
    },
    refreshData(){      //刷新表格数据
      this.dictInfoVisible = false
      this.dictTypeInfoVisible = false
      this.page = 1
      this.getList()
      this.getDictsById()
    }
  }
}
</script>

<style lang="scss" scoped>
.dict-management-view{
  width: 100%;
  height: 100%;
}
</style>
